<template>
	<view class="shop_list">
		<view class="header">
			<view class="search">
				<image class="icon" src="/static/images/search_icon.png" mode=""></image>
				<input class="input" v-model="keyword" type="text" value="" placeholder="请输入关键字"/>
			</view>
			<view class="btn" @click="search">搜索</view>
		</view>
		<view class="nav_box">
			<view @click="navtab(0)" :class="{'link':navIndex==0}" class="nav">全部</view>
			<view @click="navtab(1)" :class="{'link':navIndex==1}" class="nav">距离</view>
			<view @click="navtab(2)" :class="{'link':navIndex==2}" class="nav">人气</view>
		</view>
		<view class="list_box">
			<view class="list" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
				<image class="s_img" :src="item.imgSrc" mode=""></image>
				<view class="right_box">
					<view class="title">{{item.title}}</view>
					<view class="renqi_box">
						<view class="renqi">
							<text>{{item.province}}{{item.city}}{{item.area}}</text>
							<text class="text">人气:{{item.saleNum}}</text>
						</view>
						<view class="jilu">{{item.jilu}}</view>
					</view>
					<view class="title address">{{item.address}}</view>
				</view>
			</view>
		</view>
		<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue" 
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				navIndex:0,
				loadingType: 0,
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				p:1,
				list:[],
				userlon:'',
				userlat:'',
				ifdingwei:false,
				keyword:''
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.userinfo=uni.getStorageSync('user');
			this.userlon='108.93';
			this.userlat='34.27';
			this.p=1;
			this.choose_location();
		},
		methods: {
			search(){
				var key=this.keyword;
				if(key==''||key==undefined||key==null){
					uni.showToast({
						title:'请输入关键字',
						duration:15000,
						icon:'none'
					})
					return;
				}
				var key=encodeURIComponent(key);
				this.getinfo();
			},
			choose_location(){
				var that=this;
				uni.showLoading({
					title:'定位中...'
				})
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
						uni.hideLoading();
						var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
						var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
						uni.setStorageSync('userlon',longitude);
						uni.setStorageSync('userlat',latitude);
						that.userlon=longitude;
						that.userlat=latitude;
						that.getinfo();
						that.ifdingwei=true;
				    }
				});

			}, 
			toDetail:function(id){
				uni.navigateTo({
					url:'/pages/mallShopDetail/mallShopDetail?id='+id
				})
			},
			navtab:function(n){
				this.navIndex = n;
				this.p=1;
				this.getinfo();
			},
			getinfo(){
				var that=this;
				this.$http.get('mallshop/shopList',{
					type:that.navIndex,
					userlon:that.userlon,
					userlat:that.userlat,
					keyword:that.keyword
				}).then(function (response) {
					that.list=response.data;
					that.loadingType = 0;
					that.p++;
				}).catch(function (error) {
					console.log(error);
				});
			},
		},
		//加载更多
		onReachBottom(){
			if (this.loadingType !== 0) {
				return;
			}
			if(this.ifdingwei){
				this.getinfo();
			}
		}
	}
</script>
<style>
	page{
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.header{
		background-color: #FFFFFF;
		height: 96rpx;
		width: 100%;
		background: url('~@/static/images/index_header_bg.jpg') no-repeat center;
		background-size: 100% 100%;
		top: 0;
		left: 0;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		z-index: 99;
		.search{
			height: 70rpx;
			border-radius: 35rpx;
			background: #fff;
			flex: 1;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			.icon{
				display: block;
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
			.input{
				line-height: 70rpx;
				color: #a5a5a5;
				display: block;
				flex: 1;
				height: 70rpx;
				font-size: 26rpx;
			}
		}
		.btn{
			height: 70rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			color: #fff;
			padding-left: 24rpx;
		}
	}
	.shop_list{
		width: 100%;
		.list_box{
			margin-top: 30rpx;
			background: #fff;
			border-radius: 40rpx 40rpx 0 0;
			padding: 10rpx 30rpx 0;
			.list{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				.right_box{
					margin-left: 20rpx;
					flex: 1;
					.renqi_box{
						padding: 16rpx 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.renqi{
							color: #666666;
							font-size: 24rpx;
							.text{
								margin-left: 10rpx;
								padding: 0 10rpx;
								background: #eef2ff;
								border-radius: 10rpx;
								color: #6686f5;
								font-size: 22rpx;
							}
						}
						.jilu{
							color: #666666;
							font-size: 24rpx;
						}
					}
					.title{
						width: 550rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						&.address{
							font-size: 24rpx;
							color: #666666;
							font-weight: 100;
						}
					}
				}
				.s_img{
					width: 134rpx;
					height: 134rpx;
				}
			}
		}
		.nav_box{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			top: var(--window-top);
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			background: #fff;
			z-index: 1;
			.nav{
				font-size: 32rpx;
				color: #333;
				&.link{
					color: #6686f5;
					font-weight: bold;
				}
			}
		}
	}
</style>
